<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <cpn :number1="num1" :number2="num2"></cpn>
  </div>
  <template id="cpn">
    <div>



    <h2>props:{{number1}}</h2>
    <h2>data:{{dnumber1}}</h2>
    <!--<input type="text" v - model="dnumber1">-->
    <input type="text" :value="dnumber1" @input="num1Input">
    <h2>props:{{number2}}</h2>
    <h2>data:{{dnumber2}}</h2>
    <!--<input type="text" v mode 1=" dnumber2">-->
    <input type="text" : value="dnumber2" @input="num2Input">

    </div>
  </template>


  <script src="vue.js"></script>
  <script>
    app = new Vue({
      //声明要绑定的id
      el: '#app',
      //数据对象
      data: {
        number1: 0,
        number2: 0,

      },
      //计算属性，调用时不需要加小括号
      computed: {

      },
      //定义方法（当前对象内需要加this）
      methods: {

      },
      //注册组件（局部），写法：自定义组件标签名:组件对象
      components: {
        cpn: {
          template: "#cpn",
          data() {
            return {
              dnumber1: this.number1,
              dnumber1: this.number2,
            }
          },
          props: {
            number1: num1,
            number2: num2,
          },
          methods: {
            num1Input(event) {
              this.dnumber1 = event.target.value
            },
            num2Input(event) {
              this.dnumber2 = event.target.value
            }
          }
        }
      }
    })
  </script>
</body>

</html>